<!-- 收费单位-->
<template>
    <div class="chargingunit">
        <div class="container">
            <el-button type="primary" @click="dk">新增</el-button>
            <el-tabs v-model="flag" type="border-card" @tab-click="handleClick">
                <el-tab-pane label="银行卡管理" name="银行卡管理">
                    <el-table :data="tableData" border style="width: 100%">
                        <el-table-column type="index" label="序号" width="180"></el-table-column>
                        <el-table-column prop="unit" label="所属单位"  width="180"></el-table-column>
                        <el-table-column prop="cardNumber" label="收款卡号"></el-table-column>
                        <el-table-column prop="plan" label="应用计划"></el-table-column>
                        <el-table-column prop="bank" label="收款银行"></el-table-column>
                        <el-table-column label="状态">
                            <template slot-scope="scope">
                            <el-switch
                              v-model="scope.row.status"
                              active-color="#13ce66"
                              inactive-color="#C2C2C2"
                              :active-value='1'
                              :inactive-value="0"
                              @change="updateIsUsing(scope.row)"
                            >
                            </el-switch>
                          </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <span class="icon edit" @click="Bankedit(scope.$index, scope.row)">编辑</span>
                                <span class="icon del" @click="Bankdel(scope.row)">删除</span>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pagination">
                    <el-pagination
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="query.pageNum"
                      :page-sizes="[2, 3, 4, 5]"
                      :page-size="query.pageSize"
                      prev-text="上一页"
                      next-text="下一页"
                      layout=" prev, pager, next"
                      :total="query.total"
                    ></el-pagination>

                    <div class="jumper">
                      跳到第
                      <input type="text" ref="pageNum" :value="query.pageNum" />
                      页
                    </div>
                    <button @click="goPage">确定</button>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="微信支付管理" name='微信支付管理'>
                    <el-table :data="tableData2" border style="width: 100%">
                        <el-table-column type="index" label="序号" width="180"></el-table-column>
                        <el-table-column prop="unit" label="所属单位"  width="180"></el-table-column>
                        <el-table-column prop="appId" label="APPID"></el-table-column>
                        <el-table-column prop="plan" label="应用计划"></el-table-column>
                        <el-table-column prop="bank" label="Mchild"></el-table-column>
                        <el-table-column label="状态">
                       <template slot-scope="scope">
                            <el-switch
                              v-model="scope.row.status"
                              active-color="#13ce66"
                              inactive-color="#C2C2C2"
                              :active-value='1'
                              :inactive-value="0"
                              @change="updateIsUsing1(scope.row)"
                            >
                            </el-switch>
                          </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <span class="icon iconfont icon-bianji" @click="wxedit(scope.$index, scope.row)"></span>
                                <span class="icon iconfont icon-shanchu" @click="wxdel(scope.row)"></span>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pagination">
                    <el-pagination
                      @size-change="handleSizeChange1"
                      @current-change="handleCurrentChange1"
                      :current-page="query1.pageNum"
                      :page-sizes="[2, 3, 4, 5]"
                      :page-size="query1.pageSize"
                      prev-text="上一页"
                      next-text="下一页"
                      layout=" prev, pager, next"
                      :total="query1.total"
                    ></el-pagination>

                    <div class="jumper">
                      跳到第
                      <input type="text" ref="pageNum" :value="query1.pageNum" />
                      页
                    </div>
                    <button @click="goPage1">确定</button>
                  </div>
                </el-tab-pane>
            </el-tabs>
        </div>
        <!-- 新增-->
        <div class="dialog">
            <el-dialog title="添加" :visible.sync="addDialog" center>
                <span>
                    <el-form ref="form" :model="form" label-width="80px">
                        <el-form-item label="所属单位">
                            <el-select v-model="form.unit" placeholder="请选择单位">
                                <el-option
                                    v-for="(item, index) in colist"
                                    :key="index"
                                    :label="item.colleageName"
                                    :value="item.colleageId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="收款卡号">
                            <el-input type="text" v-model="form.cardNumber" placeholder="请输入卡号"></el-input>
                        </el-form-item>
                        <el-form-item label="应用计划">
                            <el-select v-model="form.plan" placeholder="请选择单位">
                                <el-option
                                    v-for="item in plan"
                                    :key="item.id"
                                    :label="item.label"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="收款银行">
                          <el-input type="text" v-model="form.bank" placeholder="请输入银行"></el-input>
                        </el-form-item>
                    </el-form>
                </span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="out">取 消</el-button>
                    <el-button @click='bankAdd' type="primary">保存</el-button>
                </span>
            </el-dialog>
        </div>
        <div class="dialog">
            <el-dialog title="添加微信" :visible.sync="wxaddDialog" center>
                <span>
                    <el-form ref="form" :model="wxform" label-width="80px">
                        <el-form-item label="所属单位">
                            <el-select v-model="wxform.unit" placeholder="请选择单位">
                                <el-option
                                    v-for="(item, index) in colist"
                                    :key="index"
                                    :label="item.colleageName"
                                    :value="item.colleageId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="APPID">
                            <el-input type="text" v-model="wxform.appId" placeholder="请输入APPID"></el-input>
                        </el-form-item>
                        <el-form-item label="应用计划">
                            <el-select v-model="wxform.plan" placeholder="请选择单位">
                                <el-option
                                    v-for="item in plan"
                                    :key="item.id"
                                    :label="item.label"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="收款银行">
                          <el-input type="text" v-model="wxform.bank" placeholder="请输入银行"></el-input>
                        </el-form-item>
                    </el-form>
                </span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="outs">取 消</el-button>
                    <el-button @click='wxAdd' type="primary">保存</el-button>
                </span>
            </el-dialog>
        </div>
        <!--修改-->
        <div class="dialog">
            <el-dialog title="修改" :visible.sync="editDialog" center>
                <span>
                    <el-form ref="form" :model="form2" label-width="80px">
                        <el-form-item label="所属单位">
                            <el-select v-model="form2.unit" placeholder="请选择单位">
                                <el-option
                                    v-for="(item, index) in colist"
                                    :key="index"
                                    :label="item.colleageName"
                                    :value="item.colleageId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="收款卡号">
                            <el-input type="text" v-model="form2.cardNumber" placeholder="请输入卡号"></el-input>
                        </el-form-item>
                        <el-form-item label="应用计划">
                            <el-select v-model="form2.plan" placeholder="请选择单位">
                                <el-option
                                    v-for="item in plan"
                                    :key="item.id"
                                    :label="item.label"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="收款银行">
                            <el-input type="text" v-model="form2.bank" placeholder="请输入银行"></el-input>
                        </el-form-item>
                    </el-form>
                </span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="editout">取 消</el-button>
                    <el-button type="primary" @click="bankedit">保存</el-button>
                </span>
            </el-dialog>
        </div>
        <div class="dialog">
            <el-dialog title="修改" :visible.sync="wxeditDialog" center>
                <span>
                    <el-form ref="form" :model="wxform2" label-width="80px">
                        <el-form-item label="所属单位">
                            <el-select v-model="wxform2.unit" placeholder="请选择单位">
                               <el-option
                                   :key="index"
                                    :label="item.colleageName"
                                     v-for="(item, index) in colist"
                                    :value="item.colleageId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="收款卡号">
                            <el-input type="text" v-model="wxform2.appId" placeholder="请输入卡号"></el-input>
                        </el-form-item>
                        <el-form-item label="应用计划">
                            <el-select v-model="wxform2.plan" placeholder="请选择单位">
                                <el-option
                                    v-for="item in plan"
                                    :key="item.id"
                                    :label="item.label"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="收款银行">
                            <el-input type="text" v-model="wxform2.bank" placeholder="请输入银行"></el-input>
                        </el-form-item>
                    </el-form>
                </span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="eeditouts">取 消</el-button>
                    <el-button type="primary" @click="wxeditadd">保存</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import {
  BankList,
  BankAdd,
  BankEdit,
  BankDel,
  WeChatList,
  WeChatAdd,
  WeChatEdit,
  WeChatDel,
} from "@/api/finance/Chargingunit";
import {
 getTableApi
} from "@/api/basics/college";
export default {
  data() {
    return {
      tableData: [],
      tableData2: [],
      query: {
        pageNum: 1,
        pageSize: 6,
        total: 0
      },
      query1: {
        pageNum: 1,
        pageSize: 6,
        total: 0
      },
      colist:'',
      total: 0,
      addDialog: false,
      editDialog: false,
      wxaddDialog:false,
      wxeditDialog:false,
       wxform: {
        unit:'',
        plan:'',
        bank:'',
      },
      wxform2: {
        unit:'',
        appId:'',
        plan:'',
        id:'',
        bank:'',
      },
      form: {
        unit:'',
        cardNumber:'',
        plan:'',
        bank:'',
      },
      form2: {
        unit:'',
        cardNumber:'',
        plan:'',
        id:'',
        bank:'',
      },
      plan:[
        {id:'普通收费',label:'普通收费'},
        {id:'学费',label:'学费'},
        {id:'住宿费',label:'住宿费'},
      ],
      flag:'银行卡管理',
    };
  },
  mounted(){
     this.getBankList()
     this.getWeChatList()
     this.getcoller()
  },
  methods: {
    //获取学院
    async getcoller(){
      let res=await getTableApi()
      console.log(res)
      this.colist=res.rows
    },
    dk(){
    if(this.flag=='银行卡管理'){
      this.addDialog=true
    }else{
      this.wxaddDialog=true
    }
  },
   async handleClick(tab){
    this.flag=tab.name;
  },
   //微信
  //  列表
   async getWeChatList(){
        let res=await WeChatList(this.query1)
        console.log(res)
        this.tableData2=res.rows
    },
   //添加
  async wxAdd(){
     let res=await WeChatAdd(this.wxform)
     console.log(res)
      this.$message.success("添加成功");
      this.wxaddDialog=false
      this.getWeChatList()
   },
  outs(){
     this.wxaddDialog=false
  },
  eeditouts(){
     this.wxeditDialog=false
  },
    // 分页
    // 改变每页条数
    handleSizeChange1(val) {
      console.log(`每页 ${val} 条`);
      this.query.pageSize = val;
      this.getWeChatList();
    },
    //切换页数，执行方法
    handleCurrentChange1(val) {
      console.log(`当前页: ${val}`);
      this.query.pageNum = val;
      this.getWeChatList();
    },
    goPage1() {
      let { value } = this.$refs.pageNum;
      console.log("1", value);
      this.query.pageNum = Number(value);
      this.getWeChatList();
    },  
   //修改
   wxedit(index,row){
     console.log(row)
     this.wxeditDialog=true
     this.wxform2.unit=row.unit
     this.wxform2.appId=row.appId
     this.wxform2.plan=row.plan
     this.wxform2.bank=row.bank
     this.wxform2.id=row.id
   },
   async wxeditadd(){
    let res=await WeChatEdit(this.wxform2)
    console.log(res)
    this.$message.success("修改成功");
    this.wxeditDialog=false
    this.getWeChatList()
   },
   // 删除  
    wxdel(row) {
      if (row.majorName != "") {
        this.$confirm("确认删除记录吗?", "提示", {
          type: "warning"
        })
          .then(() => {
            WeChatDel({ id: JSON.stringify(row.id) }).then(res => {
              console.log(res);
              this.$message.success("删除成功");
              this.getWeChatList();
            });
          })
          .catch(() => {});
      } 
    },
//修改状态
    updateIsUsing1(row) {
      console.log(row)
      WeChatEdit({ status: row.status, id: row.id });
      this.$message.success("修改成功");
    },
    // 银行
    // 列表
    async getBankList(){
        let res=await BankList(this.query)
        this.tableData=res.rows
        this.query.total = res.total;
    },
     // 分页
    // 改变每页条数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.query.pageSize = val;
      this.getBankList();
    },
    //切换页数，执行方法
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.query.pageNum = val;
      this.getBankList();
    },
    goPage(){
      let { value } = this.$refs.pageNum;
      console.log("1", value);
      this.query.pageNum = Number(value);
      this.getBankList();
    },
    //添加
    async bankAdd(){
      let res=await BankAdd(this.form)
      console.log('33',res)
      this.$message.success("添加成功");
      this.addDialog=false
      this.form={}
      this.getBankList()
    },
    //修改
    Bankedit(index,row){
        console.log(row);
        this.editDialog = true
        this.form2.unit=row.unit
        this.form2.cardNumber=row.cardNumber
        this.form2.plan=row.plan
        this.form2.bank=row.bank
        this.form2.id=row.id
    },
    async bankedit(){
      let res=await BankEdit(this.form2)
      console.log(res)
      this.$message.success("修改成功");
      this.editDialog=false
      this.getBankList() 
    },
    // 删除 
    Bankdel(row){
      if (row.majorName != "") {
        this.$confirm("确认删除记录吗?", "提示", {
          type: "warning"
        })
          .then(() => {
            BankDel({ id: JSON.stringify(row.id) }).then(res => {
              console.log(res);
              this.$message.success("删除成功");
              this.getBankList();
            });
          }) 
          .catch(() => {});
      }
    },
    out(){
       this.addDialog=false
    },
      editout(){
      this.editDialog=false
    },
     //修改状态
    updateIsUsing(row) {
      console.log(row)
      BankEdit({ status: row.status, id: row.id });
      this.$message.success("修改成功");
    },
  }
};  
</script>
<style lang="scss" scoped>
.pagination {
  display: flex;
  align-items: center;
  justify-content: right;
  margin-top: 20px;
  margin-right: 150px;
  .jumper {
    font-size: 14px;
    margin-left: 20px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    input {
      width: 40px;
      height: 26px;
      margin: 0 5px;
      text-align: center;
      border: solid 1px #e6e6e6;
      border-radius: 5px;
      color: #666;
      outline-style: none;
    }
  }
  button {
    height: 28px;
    line-height: 28px;
    border-radius: 5px;
    background-color: #4895db;
    border: solid 1px #4895db;
    color: #fff;
    font-size: 14px;
    padding: 0 8px;
  }
}
.chargingunit {
  width: 100%;
  .container {
    width: 100%;
    padding: 15px;
    .del {
        margin-left: 10px;
        // font-weight: bold;
        color: #1990FF;
        cursor: pointer;
    }
    .edit{
        // font-weight: bold;
        margin-right: 10px;
        color: #1990FF;
        cursor: pointer;
    }
  }
  .dialog {
    .block {
      width: 280px;
      height: 30px;
      border: solid 1px #dcdfe6;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      background-color: #fff;

      ::v-deep .el-input__inner {
        width: 240px;
        height: 28px;
        border: none;
      }

      ::v-deep .el-icon-arrow-down {
        color: #c2c2c2;
        padding: 0 10px 0 0;
      }

      ::v-deep .el-icon-arrow-up {
        color: #c2c2c2;
        padding: 0 10px 0 0;
      }

      ::v-deep .el-date-picker.has-sidebar {
        left: 460px !important;
        background-color: #4895db;
      }
    }

    .mb,
    .px {
      ::v-deep .el-form-item__content {
        display: flex;
        width: 280px;
        line-height: 30px;
        border: solid 1px #dcdfe6;
        box-sizing: border-box;
        background-color: #fff;
        border-radius: 5px;

        .el-input__inner {
          border: none;
        }

        span {
          font-size: 14px;
          padding-left: 5px;
          color: #888;
        }
      }
    }

    ::v-deep .el-dialog {
      max-width: 750px;
      min-width: 500px;
      border-radius: 10px;
      background-color: #f9f9f9;
    }

    ::v-deep .el-dialog__header {
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      background-color: #4895db;
      padding: 0;
      border-radius: 10px 10px 0 0;

      span {
        font-size: 16px;
        color: #fff;
      }
    }

    ::v-deep .el-select > .el-input {
      display: block;
      width: 300px;
    }

    ::v-deep .el-form-item__label {
      line-height: 32px;
    }

    ::v-deep .el-input__inner {
      height: 30px;
      line-height: 30px;
    }

    ::v-deep .el-dialog__headerbtn {
      top: 15px;
    }

    ::v-deep .el-dialog__headerbtn .el-dialog__close {
      color: #fff;
      font-size: 18px;
    }

    ::v-deep .el-dialog--center .el-dialog__body {
      text-align: initial;
      display: flex;
      justify-content: center;
    }

    ::v-deep .el-input__icon {
      line-height: 30px;
    }

    ::v-deep .el-form-item__content {
      width: 300px;
      line-height: 30px;
    }

    ::v-deep .el-form-item {
      margin-bottom: 15px;
    }

    ::v-deep .el-dialog__footer {
      padding: 10px 20px 40px;
    }

    ::v-deep .el-button--default {
      width: 130px;
      border-radius: 20px;
      background-color: #f0f0f0;
      color: #aaaaaa;
      border: none;
    }

    ::v-deep .el-button + .el-button {
      width: 130px;
      border-radius: 20px;
      margin-left: 50px;
      background-color: #4895db;
      border-color: #4895db;
    }
  }
}
</style>
